﻿@using HrEFCore
@model List<HF>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="~/aa/vue/dist/vue.js"></script>
	<script src="~/aa/element-ui/lib/index.js"></script>
	<link href="~/aa/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
	<script src="~/aa/axios/dist/axios.js"></script>
	<link rel="stylesheet" href="~/css/table.css" type="text/css"></link>
	<script type="text/javascript" src="~/javascript/comm/comm.js"></script>
	<script type="text/javascript" src="~/javascript/jquery-1.7.2.js"></script>
	<style type="text/css">
		body {
			background: rgb(253,244,227);
		}

		.TD_STYLE1 {
			background: #E6DDCE;
			/* color:white; */
		}

		.TD_STYLE2 {
			background: rgb(253,244,227);
		}

		.INPUT_STYLE2 {
			background: rgb(253,244,227);
		}
	</style>
</head>
<body>
	<form method="post" action="/HF/SelectByTime" id="hfselect">
		<table width="100%">
			<tr>
				<td>
					<font color="black">您正在做的业务是：人力资源--人力资源档案管理--人力资源档案查询 </font>
				</td>
			</tr>
			<tr>
				<td align="right">
					<input type="submit" value="查询" class="BUTTON_STYLE1" />
					<button><a href="@Url.Action("SouSuo","HF")" target="mainFrame" style="color:black;">搜索</a></button>
					<input type="hidden" name="result" value="toQueryList" />
				</td>
			</tr>
		</table>
		<table width="100%" border="1" cellpadding=0 cellspacing=1
			   bordercolorlight=#848284 bordercolordark=#eeeeee
			   class="TABLE_STYLE1 table-bordered">
			<tr class="TR_STYLE1">
				<td width="16%" class="TD_STYLE1">
					请选择员工所在I级机构
				</td>
				<td width="84%" class="TD_STYLE2">
					<select id="FirstKindId" name="FirstKindId" v-model="FirstKindId" v-on:change="getSecondKinds" class="form-control">
						@foreach (var item in ViewBag.cffk as IEnumerable<SelectListItem>)
						{
							<option value="@item.Value">@item.Text</option>
						}
					</select>
				</td>
			</tr>
			<tr>
				<td class="TD_STYLE1">
					请选择员工所在II级机构
				</td>
				<td width="84%" class="TD_STYLE2">
					<select id="SecondKindId" v-model="SecondKindId" name="SecondKindId" v-on:change="getThirdKinds" class="form-control">
						<option v-for="item in SecondKinds" :value="item.secondKindId">{{item.secondKindName}}</option>
					</select>
				</td>
			</tr>
			<tr class="TR_STYLE1">
				<td width="16%" class="TD_STYLE1">
					请选择员工所在III级机构
				</td>
				<td width="84%" class="TD_STYLE2">
					<select id="ThirdKindId" name="ThirdKindId" class="form-control">
						<option v-for="item in ThirdKinds" :value="item.thirdKindId">{{item.thirdKindName}}</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="TD_STYLE1">
					请选择职位分类
				</td>
				<td width="84%" class="TD_STYLE2">
					<select id="HumanMajorKindId" name="HumanMajorKindId" v-model="HumanMajorKindId" v-on:change="getName" class="form-control">
						@foreach (var item in ViewBag.cmk as IEnumerable<SelectListItem>)
						{
							<option value="@item.Value">@item.Text</option>
						}
					</select>
				</td>
			</tr>
			<tr class="TR_STYLE1">
				<td width="16%" class="TD_STYLE1">
					请选择职位名称
				</td>
				<td width="84%" class="TD_STYLE2">
					<select id="HumanMajorId" name="HumanMajorId" class="form-control">
						<option v-for="item in MajorName" :value="item.majorId">{{item.majorName}}</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="TD_STYLE1">
					请输入建档时间
				</td>
				<td width="84%" class="TD_STYLE2">
					<el-date-picker v-model="value1"
									type="date" name="startDate"
									placeholder="选择日期">
					</el-date-picker>
					至
					<el-date-picker v-model="value2"
									type="date" name="endDate"
									placeholder="选择日期">
					</el-date-picker>
				</td>
			</tr>
		</table>
	</form>
	<script>
		new Vue({
			el: '#hfselect',
			data: {
				value1: '',
				value2:'',
				FirstKindName: '',
				FirstKindId: '',
				SecondKindId:'',
				SecondKinds: [],
				ThirdKinds:[],
				HumanMajorKindId: '',
				MajorName: []
			},
			methods: {
				getSecondKinds: function () {
					var self = this;
					axios.get('/CFTK/GetSecondKinds', {
						params: {
							id: self.FirstKindId
						}
					}).then(function (res) {
						self.SecondKinds = res.data;
						console.log(res.data);
					}).catch(function (err) {
						console.log(err);
					})
				},
				getThirdKinds: function () {
					var self = this;
					axios.get('/CFTK/GetThirdKinds', {
						params: {
							id: self.SecondKindId
						}
					}).then(function (res) {
						self.ThirdKinds = res.data;
						console.log(res.data);
					}).catch(function (err) {
						console.log(err);
					})
				},
				getName: function () {
					axios.get('/HF/GetName', {
						params: {
							id: this.HumanMajorKindId
						}
					}).then(res => {
						this.MajorName = res.data;
					}).catch(err => {
						console.log(err);
					})
				}
			}
		})
	</script>
</body>
</html>